<template>
  <el-menu
    :default-active="activeMenu"
    :collapse="isCollapse"
    :unique-opened="true"
    router
  >
    <menu-item
      v-for="menu in menuList"
      :key="menu.id"
      :menu="menu"
    />
  </el-menu>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import MenuItem from './MenuItem.vue'

const route = useRoute()
const userStore = useUserStore()

const props = defineProps({
  isCollapse: {
    type: Boolean,
    default: false
  }
})

// 获取菜单列表（只显示目录和菜单类型，不包括按钮）
const menuList = computed(() => {
  return userStore.menus.filter(menu => {
    // 只显示可见的目录(1)和菜单(2)，不显示按钮(3)
    return menu.menuType !== 3 && menu.visible === 1
  })
})

// 当前激活的菜单
const activeMenu = computed(() => route.path)
</script>

<style scoped>
.el-menu {
  border-right: none;
}
</style>